<template>
  <div
    class="arithmeticLibrary app-container"
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
  >
    <el-row>
      <el-col :span="24">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          class="text-tabs TTB-gutter"
        >
          <el-tab-pane
            v-for="(item, index) in tabArr"
            :key="index"
            :label="item.label"
            :name="item.value"
          ></el-tab-pane>
          <!-- v-hasPermi="[item.per]" -->
        </el-tabs>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-image class="modal-image" :src="url" :fit="fit"></el-image>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      // tab
      activeName: "0",
      tabArr: [
        {
          label: "能耗配合模型",
          value: "0",
          per: "",
        },
        {
          label: "智能诊断模型",
          value: "1",
          per: "",
        },
        {
          label: "碳中和映射模型",
          value: "2",
          per: "",
        },
        {
          label: "考核会商模型",
          value: "3",
          per: "",
        },
      ],
      url: require("@/assets/images/library/modal.png"),
      fit: "cover",
    };
  },
  created() {},
  methods: {
    handleClick(tab, event) {},
  },
};
</script>

<style lang="scss" scoped>
.arithmeticLibrary {
  width: 100%;
  ::v-deep .text-tabs {
    margin-bottom: 5px;
    .el-tabs__active-bar {
      width: 79px;
    }
    .el-tabs__item {
      font-size: 20px;
      font-weight: 600;
      opacity: 0.8;
    }
  }
}
.modal-image {
  width: 100%;
}
</style>
